<template>
    <div class="label-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-input v-model="dialog.detail" type="textarea" placeholder="请输入函数表达式" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="closeDialog">确定</el-button>
                    <el-button @click="props.close">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import type { PopupBoxProps } from '@great/utils';

interface IProps extends PopupBoxProps {
    expression: string; // 表达式
    callBack?: (par?: string) => void;
}

const props = defineProps<IProps>();
interface Dialog {
    title: string;
    width: number;
    detail?: string;
}
const dialog = reactive<Dialog>({
    title: '函数表达式',
    width: 600,
    detail: undefined
});
//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.(dialog.detail);
};

const init = () => {
    dialog.detail = props.expression;
};
init();
</script>
<style scoped lang="scss">
.label-modal-wrapper {
    .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
            width: calc((100% - 10px) / 2);
        }
        .el-form-item:nth-child(even) {
            margin-left: 10px;
        }
    }
}
</style>
